<template>
  <div :class="[borderStatus ? 'headerBox headerBoxBom' : 'headerBox']">
    <div class="head flex-between">
      <div class="headLeft flex-center">
        <img
          class="backIcon"
          :src="backIcon"
          alt=""
          @click="onBackIcon"
          v-if="back"
        />
      </div>
      <div class="headCenter">{{ title }}</div>
      <div class="headRight">
        <p class="rightTitle" v-if="rightText" @click="onRightText">
          {{ rightText }}
        </p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent } from "vue";
import router from "../router";

export default defineComponent({
  props: {
    backIcon: {
      type: String,
      default: require("@/image/header/backIcon.png"),
    },
    back: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "",
    },
    rightText: {
      type: String,
      default: "",
    },
    borderStatus: {
      type: Boolean,
      default: true,
    },
  },
  setup(props,content) {
    function onBackIcon() {
      router.go(-1);
    }

    function onRightText() {
      content.emit("onRightText")
    }

    return {
      onBackIcon,
      onRightText,
    };
  },
});
</script>

<style scoped lang="less">
.headerBoxBom {
  border-bottom: 2px solid #f5f5f5;
}
.headerBox {
  width: 100%;
  height: 88px;
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  .head {
    width: 100%;
    height: 100%;
    padding: 0 28px;
    position: relative;
    .headLeft {
      .backIcon {
        width: 40px;
        height: 44px;
      }
    }
    .headCenter {
      color: #333;
      font-size: 36px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .headRight {
      .rightTitle {
        color: #333;
        font-size: 28px;
      }
    }
  }
}
</style>